<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-flex uni-row" v-if="xueshenxx.xh">
			<view class="text" style="width: 200upx;">学号：</view>
			<view class="text" style="-webkit-flex: 1;flex: 1;">{{xueshenxx.xh}}</view>
		</view>
		<view class="uni-flex uni-row" v-if="xueshenxx.xm">
			<view class="text" style="width: 200upx;">姓名：</view>
			<view class="text" style="-webkit-flex: 1;flex: 1;">{{xueshenxx.xm}}</view>
		</view>
		<view class="uni-flex uni-row" v-if="xueshenxx.bj">
			<view class="text" style="width: 200upx;">班级：</view>
			<view class="text" style="-webkit-flex: 1;flex: 1;">{{xueshenxx.bj}}</view>
		</view>
		
		<view v-if="formHide" class="uni-padding-wrap">
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column inputsytle">
					<input class="uni-input" type="idcard" v-model="sfzh" name="sfzh" placeholder="请输入身份证号" />
				</view>
				<view class="uni-btn-v inputsytle">
					<button type="primary" form-type="submit">提交</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../common/graceChecker.js");
	export default {
		data() {
			return {
				title: '学籍查询',
				formHide: true,
				xueshenxx:{
					xh:"",
					xm:"",
					bj:""
				},
				sfzh:""
			}
		},
		methods: {
			getXueJi(){
				vk.callFunction({
				  url: 'client/jp/pub/jpapi.getxsxjxxone',
				  title: '请求中...',
				  data: {
				    zjhm: this.sfzh
				  },
				  success: (data) => {
					  console.log(data)
				    		if(data.info &&data.info.zjhm){
				    			uni.showToast({title:"查到了", icon:"none"})
				    			this.formHide = false
				    			this.title = '学籍资料'
				    			this.xueshenxx.xh  = data.info.xh
				    			this.xueshenxx.xm = data.info.xm
				    			this.xueshenxx.bj = data.info.bj
				    		}else{
				    			uni.showToast({title:"查无此人", icon:"none"})
				    		}
				  },
				  fail: (err) => {
				    
				  },
				  complete: (res) => {
				    
				  }
				});
			},
			formSubmit: function(e) {
				let rule = [
					{name:"sfzh", checkType : "string", checkRule:"18,18",  errorMsg:"请输入正确的身份证号码"}
				]
				//进行表单检查
				let formData = e.detail.value
				let checkRes = graceChecker.check(formData, rule)
				if(checkRes){
					this.getXueJi()
					// uni.showToast({title:"验证通过!", icon:"none"})
				}else{
					uni.showToast({ title: graceChecker.error, icon: "none" })
				}
			}
		}
	}
</script>

<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
	.inputsytle{
		padding: 10rpx;
	}
	.flex-item {
		width: 33.3%;
		height: 200upx;
		text-align: center;
		line-height: 200upx;
	}

	.flex-item-V {
		width: 100%;
		height: 150upx;
		text-align: center;
		line-height: 150upx;
	}

	.text {
		margin: 15upx 10upx;
		padding: 0 20upx;
		background-color: #ebebeb;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		color: #777;
		font-size: 26upx;
		color: #000000;
	}

	.desc {
		/* text-indent: 40upx; */
	}
</style>
